<template>
	<view class="u-page fullpage u-bg-white" :style="skin">
		<loading :isShow="isFullLoading" size="lg"></loading>
		<block v-if="!isFullLoading">
			<zx-nav noTitle mpShowRight bg="#f4f4f4">
				<searchbar slot="center"></searchbar>
				<view class="cart" slot="right" @tap="navTo('/pages/car/car', 'switchTab')">
					<u-badge max="99" :value="cartNum"></u-badge>
					<image :src="`${assetsPath}/cart.png`" mode="widthFix"></image>
				</view>
			</zx-nav>
			<view class="bg-f4 baseinfo">
				<view class="swiper-box">
					<goods-detail-swiper
						:imgInfo="goodsInfo.img_url"
						:videoExist="goodsInfo.video_url && goodsInfo.video_url != 'null'"
						:video_url="goodsInfo.video_url"
					></goods-detail-swiper>
				</view>
				<view class="goods-title flex flex-wrap u-col-center u-row-between">
					<view class="mr5 flex u-col-center">
						<text class="u-primary mr15" v-if="goodsInfo.is_shipping == 1">(包邮)</text>
						<text class="u-primary mr15">{{ goodsInfo.product_dengji_ }}</text>
						{{ goodsInfo.name }}
						<view class="btn" v-if="goodsInfo.shootvideo_id" @tap="showShootVideo(goodsInfo)">查看今日实拍</view>
					</view>
					<view @tap="follow" class="fav flex u-col-center u-row-center" :class="{ active: goodsInfo.product_is_follow == 1 }">
						<image v-if="goodsInfo.product_is_follow == 0" :src="`${assetsPath}/fav2.png`" mode="widthFix"></image>
						<text class="ml8">{{ goodsInfo.product_is_follow == 0 ? '' : '已' }}关注</text>
					</view>
				</view>
				<view class="deal">已成交{{ goodsInfo.total_sales }}扎，剩余{{ goodsInfo.stock }}扎</view>
				<view class="tags u-flex u-flex-wrap">
					<u-tag
						v-if="goodsInfo.product_lable == 1 && goodsInfo.product_lable_name"
						size="mini"
						:color="goodsInfo.product_lable_color"
						:bgColor="goodsInfo.product_lable_bg_color"
						:borderColor="goodsInfo.product_lable_bg_color"
						:text="goodsInfo.product_lable_name"
					></u-tag>
					<image class="tag" :src="tag.img_url" mode="heightFix" v-for="(tag, index) in goodsInfo.lable"></image>
				</view>
				<view class="pricebar flex u-flex-between u-flex-items-end">
					<view>
						<text class="symbol u-primary">¥</text>
						<text class="price u-primary">{{ goodsInfo.price }}</text>
						<text class="unit u-primary">/扎</text>
						<!-- <text class="old-price ml7" v-if="goodsInfo.is_seckill == 1">¥{{ goodsInfo.seckill_price }}</text> -->
						<template v-if="goodsInfo.is_green_price == 1">
							<text class="vip-price ml14">¥{{ goodsInfo.green_price }}</text>
							<image class="vip ml4" :src="`${assetsPath}/vip.png`" mode="widthFix"></image>
						</template>
					</view>
					<view class="rel flex justify-end" style="width: 240rpx">
						<numberbox
							v-if="goodsInfo.cart_num"
							v-model="goodsInfo.cart_num || 0"
							class="num"
							@change="({ value }) => inputCar(value)"
							:max="goodsInfo.stock"
						></numberbox>
						<u-button v-else @tap="inputCar(1)" type="success" shape="circle" class="u-reset-button">
							<u-icon class="" color="#FFFFFF" name="plus" size="32"></u-icon>
							<text class="ml10">加入购物车</text>
						</u-button>
					</view>
				</view>
			</view>
			<details-anchor :activeColor="themeColor" :barId="barId" ref="barTabNav" id="navTab" :tabList="tabTempList">
				<view class="u-bg-white" id="details">
					<view class="b-white" style="padding: 20rpx 0">
						<view>
							<text class="title">单位：</text>
							<text>{{ goodsInfo.product_guige_ }}</text>
						</view>
						<view>
							<text class="title">长度：</text>
							<text>{{ goodsInfo.product_changdu_ }}</text>
						</view>
						<view>
							<text class="title">成熟度：</text>
							<text>{{ goodsInfo.product_chengshudu_ }}</text>
						</view>
						<view>
							<text class="title">优点：</text>
							<text>{{ goodsInfo.product_youdian_ }}</text>
						</view>
						<view>
							<text class="title">缺点：</text>
							<text>{{ goodsInfo.product_quedian_ }}</text>
						</view>
						<view class="tip">{{ appName }}报价已包含打包费、材料费、交易佣金</view>
					</view>
				</view>
				<view class="shop-content" id="merchant">
					<view class="flex u-flex-items-center u-flex-between">
						<view class="flex align-center">
							<image class="shop-avatar" mode="aspectFill" :src="goodsInfo.supplier_img || '/static/defaultAvatar.png'"></image>
							<view class="ml24">
								<view class="u-flex-y-center">
									<text class="u-m-r-10">{{ goodsInfo.supplier_name }}</text>
									<u-tag
										v-if="goodsInfo.dp_lable == 1 && goodsInfo.dp_lable_name"
										size="mini"
										:color="goodsInfo.dp_lable_color"
										:bgColor="goodsInfo.dp_lable_bg_color"
										:borderColor="goodsInfo.dp_lable_bg_color"
										:text="goodsInfo.dp_lable_name"
									></u-tag>
									<text class="" style="font-size: 24rpx; color: #999; margin-left: 12rpx">{{ goodsInfo.contact_address || '' }}</text>
								</view>
								<view class="flex u-font-12">
									<u-icon name="map" color="#999" size="28"></u-icon>
									{{ goodsInfo.store_house_address }}
								</view>
								<view class="flex mt15">
									<image class="shop-tag" :src="tag.img_url" mode="heightFix" v-for="(tag, index) in goodsInfo.supplier_lable" :key="index"></image>
								</view>
							</view>
						</view>
						<view class="shop-entry flex u-flex-items-center u-flex-center" @tap="goToShop">
							<image class="" mode="aspectFill" src="/static/shopicon.png" style="width: 30rpx; height: 30rpx"></image>
							<view class="ml10" style="color: #666666">进入店铺</view>
						</view>
					</view>
					<view class="" style="background: #ffffff; padding: 24rpx 0 14rpx 0"><u-line class="" color="#EEEEEE"></u-line></view>
					<view class="mt30 mb36">交易中的商品</view>
					<view class="u-flex sellerlist">
						<view class="flex u-flex-1 u-flex-between">
							<view @tap="goToGoodsDetail(index)" class="deal-pro flex u-flex-1" v-for="(item, index) in sellerGoods" :key="index">
								<u-lazy-load borderRadius="15" class="image-pro" height="180rpx" :image="item.img_url[0]" imgMode="aspectFill"></u-lazy-load>
								<view class="name u-line-1">
									<text>{{ item.name }}</text>
									<text class="ml20">{{ item.product_dengji_ }}</text>
								</view>
								<view class="price u-primary">
									<text>¥</text>
									<text class="num">{{ item.price }}</text>
									<text>/扎</text>
								</view>
							</view>
						</view>
						<view class="more u-flex u-flex-items-center ml20" @tap="goToShop">
							<text>共 {{ sellerGoodstotal }} 件</text>
							<image :src="`${assetsPath}/right2.png`" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="comment-anchor" id="comment">
					<view class="mt10 u-bg-white cu-bar u-flex justify-between align-center" v-if="evaluatetotal == 0">
						<view class="action">商品评价（0）</view>
						<view class="action">暂无产品评价</view>
					</view>
					<block v-else>
						<view class="mt10 u-bg-white cu-bar u-flex justify-between align-center" @tap="allreply">
							<view class="action">商品评价（{{ evaluatetotal }}）</view>
							<view class="action flex align-center">
								<text>查看全部</text>
								<image src="/static/right.png" mode="widthFix" class="more"></image>
							</view>
						</view>
						<view class="u-bg-white replylist"><cmt-reply v-for="(item, index) in evaluatelist" :key="index" :info="item"></cmt-reply></view>
					</block>
				</view>
				<view class="mtb20 rule-anchor u-bg-white" id="rule">
					<view>详情</view>
					<view class="goods-img mt20">
						<rf-parser :html="goodsInfo.info && goodsInfo.info != 'null' ? goodsInfo.info : ''" lazy-load></rf-parser>
						<view class="imgbox"><image :src="img" mode="widthFix" v-for="(img, index) in productImgList" :key="index"></image></view>
					</view>
				</view>
			</details-anchor>
		</block>
		<sVideo ref="sVideo"></sVideo>
	</view>
</template>

<script>
import searchbar from '@/components/searchbar';
import loading from '@/components/loading';
import goodsDetailSwiper from './components/goods-detail-swiper';
import detailsAnchor from './components/details-anchor';
import numberbox from '@/components/numberbox';
import sVideo from '@/components/s-video/s-video';
import { mapState, mapMutations, mapActions } from 'vuex';
import rfParser from '@/components/rf-parser/index.vue';
import cmtReply from '@/components/cmt-reply';
export default {
	data() {
		return {
			goodsInfo: {},
			isFullLoading: true,
			evaluatelist: [],
			sellerGoods: [],
			evaluatetotal: 0,
			sellerGoodstotal: 0,
			tabTempList: [
				{
					title: '规格',
					navTarget: '#details'
				},
				{
					title: '卖家',
					navTarget: '#merchant'
				},
				{
					title: '评价',
					navTarget: '#comment'
				},
				{
					title: '详情',
					navTarget: '#rule'
				}
			]
		};
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.getProductDetails();
			this.getProductEvaluate();
		}

		if (!!options.recommendId) {
			this.SET_INVITED(options.recommendId);
		}
	},
	computed: {
		...mapState(['memberId', 'cartNum', 'productImgList', 'CustomBar', 'StatusBar'])
	},
	components: { searchbar, loading, goodsDetailSwiper, detailsAnchor, numberbox, rfParser, cmtReply, sVideo },
	onShareTimeline() {
		let scene = `id=${this.id}`;
		if (this.memberId) {
			scene = scene + '&recommendId=' + this.memberId;
		}
		let shareParams = {
			title:
				this.goodsInfo.name + ',' + this.goodsInfo.product_guige_ + ',' + this.goodsInfo.product_dengji_ + ',' + this.goodsInfo.price + '元' || `欢迎来到${this.appName}`,
			imageUrl: this.goodsInfo.img_url[0],
			path: `/pages/goodsdetails/goodsdetails`,
			query: scene
		};
		return shareParams;
	},
	onShareAppMessage() {
		let scene = `id=${this.id}`;
		if (this.memberId) {
			scene = scene + '&recommendId=' + this.memberId;
		}
		let shareParams = {
			title:
				this.goodsInfo.name + ',' + this.goodsInfo.product_guige_ + ',' + this.goodsInfo.product_dengji_ + ',' + this.goodsInfo.price + '元' || `欢迎来到${this.appName}`,
			imageUrl: this.goodsInfo.img_url[0],
			path: `/pages/goodsdetails/goodsdetails?${scene}`
		};
		return shareParams;
	},
	created() {
		if (this.productImgList.length == 0) {
			this.getProductImg();
		}
	},
	onPageScroll: function (t) {
		this.isFullLoading || this.$refs.barTabNav._selectedTab(t.scrollTop);
	},
	methods: {
		...mapMutations(['SET_INVITED', 'setCartNum', 'SET_PRODUCTIMGLIST']),
		...mapActions(['getCarCount']),
		getProductDetails() {
			this.$postAction(this.$api.getProductList, {
				id: this.id
			}).then(da => {
				if (da.code == 0 && da.data && da.data.length > 0) {
					this.goodsInfo = da.data[0];
					this.getProductList(this.goodsInfo.sid);
				}
				this.isFullLoading = false;
			});
		},
		//获取产品评价
		getProductEvaluate() {
			this.$postAction(this.$api.getProductEvaluate + this.id, {
				page: 1,
				limit: 2
			}).then(da => {
				if (da.code == 0) {
					this.evaluatelist = da.data;
					this.evaluatetotal = da.count || 0;
				}
			});
		},
		showContact() {
			this.$refs.contact.show();
		},
		changeNum(info) {
			this.info.cart_num = info.cart_num;
		},
		navTo(url, type) {
			uni[type]({
				url: url
			});
		},
		imageLoad(index) {
			this.bannerList[index].loaded = true;
		},
		cardSwiper(e) {
			this.curIndex = e.detail.current;
		},
		allreply() {
			/* 查看更多评论 */
			uni.navigateTo({
				url: '/pages/productReply/productReply?id=' + this.id
			});
		},
		getProductImg() {
			this.$postAction(this.$api.getProductImg).then(da => {
				if (da.code == 0) {
					this.SET_PRODUCTIMGLIST(da.data);
				}
			});
		},
		inputCar(num) {
			this.$postAction(
				this.$api.inputCar + this.id,
				{
					num
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0) {
					this.goodsInfo.cart_num = num;
					this.getCarCount();
				}
			});
		},
		getProductList(sid) {
			this.$postAction(this.$api.getProductList, {
				page: 1,
				limit: 3,
				sid
			}).then(da => {
				this.sellerGoods = da.data || [];
				this.sellerGoodstotal = da.count;
			});
		},
		goToShop() {
			uni.navigateTo({
				url: '/pages/shop/shop?id=' + this.goodsInfo.sid
			});
		},
		follow() {
			let url = this.goodsInfo.product_is_follow ? this.$api.delFollow : this.$api.addFollow;
			this.$postAction(url + this.goodsInfo.id, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0) {
					if (this.goodsInfo.product_is_follow == 0) {
						uni.showToast({
							title: '添加成功，可在我的--我的关注里查看',
							icon: 'none'
						});
					}
					this.goodsInfo.product_is_follow = this.goodsInfo.product_is_follow == 1 ? 0 : 1;
				}
			});
		},
		goToGoodsDetail(index) {
			uni.navigateTo({
				url: '/pages/goodsdetails/goodsdetails?id=' + this.sellerGoods[index].id
			});
		},
		showShootVideo(info) {
			this.$refs.sVideo.show(info);
		}
	}
};
</script>

<style lang="scss">
.cart {
	position: relative;
	image {
		display: block;
		width: 46upx;
		height: 43upx;
	}
	.u-badge {
		position: absolute;
		right: 0rpx;
		transform: translate(50%, -50%);
		top: 0;
		z-index: 999;
	}
}
.bg-f4 {
	background: #f4f4f4;
}
@-webkit-keyframes shrink {
	0% {
		padding: 0 20rpx;
		width: 240rpx;
	}

	100% {
		padding: 0;
		width: 0;
	}
}

@keyframes shrink {
	0% {
		padding: 0 20rpx;
		width: 240rpx;
	}

	100% {
		padding: 0;
		width: 0;
	}
}

.disappear {
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 0.1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: shrink;
	animation-timing-function: linear;
}

.swiper-box {
	padding: 20rpx 0;
}

.goods-title {
	font-size: 32rpx;
	font-weight: 700;
	margin: 20rpx 28rpx 0;
}

.goods-title .title-tag {
	background: #fff;
	border: 1px solid #ff9c00;
	border-radius: 6rpx;
	font-weight: 400;
	height: 36rpx;
	padding: 0 7rpx;
}

.goods-title .title-tag .text-name {
	color: #ff9c00;
	font-size: 20rpx;
	line-height: 25rpx;
}
.goods-title .btn {
	background: #009944;
	color: #fff;
	padding: 10upx;
	border-radius: 4px;
	font-size: 22upx;
	font-weight: 400;
	margin-left: 30upx;
}

.fav {
	color: #1c1c1e;
	width: 130upx;
	height: 48upx;
	background: #ffffff;
	border-radius: 24upx;
	border: 1px solid #dbdbdb;
	font-size: 24upx;
	font-weight: 400;
	image {
		width: 26upx;
		height: 26upx;
		display: block;
		font-size: 24px;
	}
	&.active {
		background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
		color: #fff;
	}
}
.deal {
	color: #666;
	margin: 20rpx 20rpx 24rpx;
}
.baseinfo {
	border-radius: 0 0 48upx 48upx;
	padding-bottom: 40upx;
	margin-bottom: 40upx;
}
.pricebar {
	margin: 0 20rpx;
}

.pricebar .symbol {
	font-size: 32upx;
	font-weight: 500;
}
.pricebar .price {
	font-size: 48upx;
	font-weight: 500;
}
.pricebar .unit {
	font-size: 27upx;
	font-weight: 500;
}
.pricebar .vip {
	width: 77upx;
	height: 30upx;
}
.pricebar .old-price {
	color: #969696;
	font-size: 26upx;
	text-decoration: line-through;
}
.pricebar .vip-price {
	font-weight: 500;
	color: #2c3664;
	font-size: 28upx;
}
.instruction {
	background: #fff;
	border-radius: 16rpx;
	margin: 44rpx 20rpx 40rpx;
	padding: 10rpx 20rpx;
}

.instruction .dot {
	background: #333;
	border-radius: 6rpx;
	height: 6rpx;
	width: 6rpx;
}

.instruction .add-on-item {
	border: 1px solid #eaeaea;
	border-radius: 200rpx;
}

#details {
	padding: 0 28upx;
	color: #1c1c1e;
	font-size: 26upx;
	line-height: 37px;
	.title {
		color: #757575;
	}
	.tip {
		color: #8e8e93;
		font-size: 24upx;
	}
	& > view + view {
		margin-top: 32upx;
	}
}

.detail-content {
	background: #fff;
	padding: 20rpx;
}

.shop-content {
	background: #fff;
	margin: 20rpx 0;
	padding: 20rpx;
}

.shop-content .shop-avatar {
	border-radius: 100rpx;
	height: 100rpx;
	width: 100rpx;
}

.shop-content .shop-tag {
	height: 32upx;
	// background: #c15179;
	// border-radius: 4rpx;
	// color: #fff;
	// font-size: 24rpx;
	margin: 0 6rpx;
	// padding: 0 4rpx;
}

.shop-content .shop-entry {
	width: 190upx;
	height: 66upx;
	background: #f5f5f5;
	border-radius: 100upx;
	line-height: 66upx;
	text-align: center;
	font-size: 26upx;
	color: #636366;
}

.comment-content {
	background: #fff;
	margin: 20rpx 0;
	padding: 20rpx;
}

.comment-content .comment-item {
	padding-top: 20rpx;
}

.comment-content .comment-item .comment-img .u-wrap,
.comment-content .comment-item .comment-img .u-wrap > view {
	height: 100%;
}
.sellerlist .more {
	color: #757575;
	font-size: 24upx;
	height: 180upx;
	image {
		display: block;
		width: 24upx;
		height: 24upx;
	}
}
.deal-pro {
	flex-direction: column;
	justify-content: center;
	width: 180rpx;
	.price {
		font-size: 22upx;
		font-weight: 500;
		margin-top: 4upx;
		.num {
			font-size: 36upx;
		}
	}
	.name {
		margin-top: 12upx;
		color: #1c1c1e;
		font-size: 26upx;
	}
}

.deal-pro .image-pro {
	height: 180rpx;
	width: 180rpx;
}
.tags {
	margin: 0 23upx;
	.tag {
		height: 32upx;
		margin: 5upx;
	}
}
.cu-bar {
	padding: 30upx 0;
	font-size: 28upx;
	.more {
		width: 24upx;
		height: 24upx;
	}
	.action:first-child {
		font-size: 32upx;
		margin-left: 28upx;
		font-weight: 400;
		color: #1c1c1e;
	}

	.action:last-child {
		margin-right: 28upx;
		font-size: 24upx;
		color: #999;
	}
}
.replylist {
	padding: 20upx 28upx;
}
.rule-anchor {
	padding: 32upx 28upx 0;
	margin-top: 12upx;
	font-size: 28upx;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>
